<template>
  <div class="base-table">
    <el-card>
      <template #header>
        <div class="card-header">
          <TableToolbar ref="toolbarRef" :select-options="selectOptions" :select-placeholder="selectPlaceholder"
            :show-select="showSelect" @select-change="handleSelectChange" :selected-count="selectedCount"
            :placeholder="placeholder" :show-operations="showOperations" :show-buttons="showButtons"
            :disabled-operations="disabledOperations" :show-date-picker="showDatePicker"
            @search="handleSearch" @reset="handleReset" @add="handleAdd"
            @edit="handleEdit" @delete="handleDelete" @export="handleExport" @print="handlePrint"
            @function-click="handleFunctionClick" @virtual="toggleVirtualMode"
            @date-change="handleDateChange"
            />
        </div>
      </template>

      <div class="table-container">
        <DynamicTable ref="tableRef" :loading="loading" :table-data="tableData" :columns="columns"
          :is-virtual="isVirtualMode" @row-click="handleRowClick" 
          @function-click="(params) => handleFunctionClick(params.row, params.column)"
          @current-change="handleCurrentChange"
          @column-click="handleColumnClick"
          @selection-change="handleSelectionChange"
          :table_name="table_name"
          :expandable="expandable"
          @update:expandable="$emit('update:expandable', $event)"
          :expandFields="expandFields"
          />
      </div>

      <div class="pagination" v-if="!isVirtualMode">
        <el-pagination :current-page="currentPage" :page-size="pageSize" :page-sizes="pageSizes" :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          layout="total, sizes, prev, pager, next, jumper" />
      </div>

      <div class="virtual-mode-info" v-else>
        <el-alert
          title="已启用表格虚拟化模式"
          type="info"
          :closable="false"
          show-icon
        >
          <template #default>
            当前显示全部数据，共 {{ tableData.length }} 条记录
            <el-button type="primary" link @click="toggleVirtualMode">返回分页模式</el-button>
          </template>
        </el-alert>
      </div>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'
import TableToolbar from './components/tableToolBar/index.vue'
import DynamicTable from './components/table/index.vue'
import type { TableColumn } from './components/table/types'
import { ElMessage } from 'element-plus/es'
import { exportToExcel } from '../../utils/exportUtils'

/** 选择器选项接口 */
interface SelectOption {
  /** 选项标签 */
  label: string
  /** 选项值 */
  value: string | number
}

/** 表格组件属性接口 */
interface TableProps {
  /** 搜索框占位符 */
  placeholder?: string
  /** 表格数据 */
  tableData: any[]
  /** 数据总数 */
  total: number
  /** 加载状态 */
  loading?: boolean
  /** 当前页码 */
  currentPage: number
  /** 每页条数 */
  pageSize: number
  /** 可选的每页条数 */
  pageSizes?: number[]
  /** 表格列配置 */
  columns?: TableColumn[]
  /** 是否显示操作区 */
  showOperations?: boolean
  /** 显示的操作按钮 */
  showButtons?: ('add' | 'edit' | 'delete' | 'export' | 'print')[]
  /** 是否显示选择器 */
  showSelect?: boolean
  /** 选择器选项 */
  selectOptions?: SelectOption[]
  /** 选择器占位符 */
  selectPlaceholder?: string
  /** 表格名称 */
  table_name?: string
  /** 列点击事件 */
  columnClick?: (row: any, column: TableColumn) => void
  /** 是否显示日期选择器 */
  showDatePicker?: boolean
  /** 是否显示可展开行 */
  expandable?: boolean
  /** 展开时显示的字段列表 */
  expandFields?: string[]
}

const props = withDefaults(defineProps<TableProps>(), {
  placeholder: '请输入关键词搜索',
  loading: false,
  pageSizes: () => [20, 50],
  showOperations: false,
  showButtons: () => ['add', 'edit', 'delete', 'export', 'print'],
  columns: () => [],
  showSelect: false,
  selectOptions: () => [],
  selectPlaceholder: '请选择',
  table_name: '',
  showDatePicker: false,
  expandable: false,
  expandFields: () => []
})

/** 组件事件 */
const emit = defineEmits<{
  /**
   * 函数点击事件
   * @param params - 包含行数据和列数据的对象
   */
  'function-click': [params: { row: any; column: TableColumn }]
  /**
   * 当前页变化事件
   * @param value - 新的页码值
   */
  'current-change': [value: number]

  /**
   * 每页条数变化事件
   * @param value - 新的每页条数
   */
  'update:pageSize': [value: number]

  /**
   * 搜索事件
   * @param params - 搜索参数对象
   * @param params.keyword - 搜索关键词
   * @param params.page - 当前页码
   * @param params.pageSize - 每页条数
   */
  'search': [params: { keyword: string, page: number, pageSize: number }]

  /**
   * 重置事件
   */
  'reset': []

  /**
   * 新增事件
   */
  'add': []

  /**
   * 编辑事件
   * @param row - 要编辑的行数据
   */
  'edit': [row: any]

  /**
   * 删除事件
   * @param row - 要删除的行数据
   */
  'delete': [row: any]

  /**
   * 导出事件
   */
  'export': []

  /**
   * 打印事件
   */
  'print': []

  /**
   * 选择变化事件
   * @param selection - 当前选中的所有行数据
   */
  'selection-change': [selection: any[]]

  /**
   * 每页条数变化事件
   * @param size - 新的每页条数
   */
  'size-change': [size: number]

  /**
   * 行点击事件
   * @param row - 被点击的行数据
   */
  'row-click': [row: any]

  /**
   * 选择器值变化事件
   * @param value - 选择器的新值
   */
  'select-change': [value: string | number]

  /**
   * 虚拟模式切换事件
   */
  'virtual': []

  /**
   * 加载全部数据事件
   * @param params - 加载参数对象
   * @param params.limit - 限制加载的数据条数
   */
  'load-all-data': [params: { limit: number }]

  /**
   * 列点击事件
   * @param row - 被点击的行数据
   * @param column - 被点击的列数据
   */
  'column-click': [row: any, column: string]
  
  /**
   * 日期范围变化事件
   * @param dateRange - 选择的日期范围，格式为 [startDate, endDate]
   */
  'date-change': [dateRange: [string, string] | null]

  /**
   * 更新当前页事件
   * @param page - 新的页码
   */
  'update:current-page': [page: number]

  /**
   * 更新每页条数事件
   * @param pageSize - 新的每页条数
   */
  'update:page-size': [pageSize: number]

  /**
   * 更新可展开行事件
   * @param expandable - 新的可展开行状态
   */
  'update:expandable': [expandable: boolean]
}>()

const tableRef = ref()
const toolbarRef = ref()
const selectedRows = ref<any[]>([])
const currentRow = ref<any>(null)

/** 选中数量 */
const selectedCount = computed(() => selectedRows.value.length)

/** 操作按钮禁用状态 */
const disabledOperations = computed(() => ({
  edit: !currentRow.value,
  delete: !currentRow.value
}))

const handleDateChange = (dateRange: [string, string] | null) => {
  emit('date-change', dateRange)
}

/**
 * 处理搜索
 * @param keyword - 搜索关键词
 */
const handleSearch = (keyword: string) => {
  emit('search', { keyword, page: props.currentPage, pageSize: props.pageSize })
}

/**
 * 处理重置
 */
const handleReset = () => {
  console.log("重置处理")
  emit('reset')
}

/**
 * 处理函数点击
 * @param row - 点击的行数据
 * @param column - 点击的列数据
 */
const handleFunctionClick = (row: any, column: TableColumn) => {
  emit('function-click', { row, column })
}

/**
 * 处理表格选择变化
 * @param selection - 选中的行数据
 */
const handleSelectionChange = (selection: any[]) => {
  selectedRows.value = selection
  emit('selection-change', selection)
}

/**
 * 处理每页条数变化
 * @param val - 新的每页条数
 */
const handleSizeChange = (val: number) => {
  emit('update:pageSize', val)
  emit('size-change', val)
}

/**
 * 处理当前页变化
 * @param val - 新的页码
 */
const handleCurrentChange = (val: number) => {
  console.log("当前页变化处理" + val)
  emit('current-change', val)
}

// 工具栏操作处理
const handleAdd = () => emit('add')
const handleEdit = () => currentRow.value && emit('edit', currentRow.value)
const handleDelete = () => currentRow.value && emit('delete', currentRow.value)
const handleExport = () => {
  // 检查是否有选中行
  if (selectedRows.value.length === 0) {
    ElMessage.warning('请先选择要导出的数据')
    return
  }
  
  // 使用共享导出功能
  exportToExcel(selectedRows.value, '表格数据导出')
}
const handlePrint = () => emit('print')

/**
 * 处理行点击
 * @param row - 点击的行数据
 */
const handleRowClick = (row: any) => {
  currentRow.value = row
  emit('row-click', row)
}

/**
 * 处理选择器值变化
 * @param value - 选择器的值
 */
const handleSelectChange = (value: string | number) => {
  emit('select-change', value)
}

// 虚拟表格模式状态
const isVirtualMode = ref(false)

// 修改 toggleVirtualMode 函数
const toggleVirtualMode = () => {
  isVirtualMode.value = !isVirtualMode.value
  if (isVirtualMode.value) {
    // 在虚拟模式下加载所有数据（最多10000条）
    emit('load-all-data', { limit: 10000 })
  } else {
    // 切回分页模式，重新加载当前页数据
    emit('search', { keyword: '', page: props.currentPage, pageSize: props.pageSize })
  }
}

/**
 * 处理列点击
 * @param row - 点击的行数据
 * @param column - 点击的列配置
 */
const handleColumnClick = (row: any, column: string) => {
  emit('column-click', row, column)
}

// 暴露给父组件的方法
defineExpose({
  setCurrentRow: (row: any) => {
    if (tableRef.value) {
      tableRef.value.setCurrentRow(row);
    }
  },
  /** 清除表格选择 */
  clearSelection: () => tableRef.value?.clearSelection(),
  /** 清除选择器选择 */
  clearSelect: () => {
    if (toolbarRef.value) {
      toolbarRef.value.selectedValue = ''
    }
  },
  toggleVirtualMode
})
</script>

<style lang="scss" scoped>
.base-table {
  height: 100%;

  .el-card {
    height: 100%;
    display: flex;
    flex-direction: column;

    :deep(.el-card__body) {
      flex: 1;
      display: flex;
      flex-direction: column;
      padding: 10px;
    }
  }

  .table-container {
    flex: 1;
    overflow: auto;
  }

  .pagination {
    margin-top: 20px;
    display: flex;
    justify-content: center;
  }

  .virtual-mode-info {
    margin-top: 20px;
  }
}
</style>